import React, { useEffect, useRef, useState } from "react";

import {
  Dimensions, FlatList,
  Image, NativeModules,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet, Text, TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import AntDesign from "react-native-vector-icons/AntDesign";
import Entypo from "react-native-vector-icons/Entypo";
import Colors from "../../util/Colors";
import Toast from "react-native-easy-toast";
import EvilIcons from "react-native-vector-icons/EvilIcons";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import { login163Status } from "../../request/neteaseRequest";

export default function(props){

  let [playList,setPlayList] = useState([])
  const [toAdd,setToAdd] = useState(false)
  let [listName,setListName] = useState('')

  useEffect(() => {
    NativeModules.ToolModule.getPlayList().then((r) => {
      //console.log(r);
      let result = r.playList;
      setPlayList(JSON.parse(result));
    })
  },[])
  function addPlayList(){
    let id = Date.now().toString();
    let list = {
      id:id,
      name:listName
    }
    //console.log('添加歌单: '+list);
    //console.log(list);
    let newList = playList;
    if(!newList){
      newList = [];
    }
    newList.push(list);
    playList = newList;
    setPlayList(newList);
    asyList();
    setToAdd(false);
  }

  function remove(item){
    let newPlay = [];
    for (const p of playList) {
      if(p.id !== item.id){
        newPlay.push(p);
      }
    }
    playList = newPlay;
    setPlayList(newPlay);
    asyList();
  }
  function asyList(){
    //console.log('开始同步存储歌单:');
    //console.log(playList);
    NativeModules.ToolModule.addPlayList(JSON.stringify(playList)).then((r) => {
      //console.log(r);
    })
  }
  function pressItem(item){
    props.navigation.navigate('LocalListDetail',{list:item})
  }
  function renderList({item}){
    return(
      <TouchableOpacity onPress={() => pressItem(item)}>
        <View style={styles.item}>
          <Text style={styles.itemText}>{item.name}</Text>
          <FontAwesome name={'remove'} size={25} style={styles.del} onPress={() => remove(item)}></FontAwesome>
        </View>
      </TouchableOpacity>
    )

  }

  return(
    <View style={styles.contain}>
      <View style={styles.top}>
        <AntDesign
          name={'arrowleft'}
          size={30}
          style={styles.icon}
          color={'white'}
          onPress={() => props.navigation.pop()}
        />

        <View style={styles.layoutText}>
          <Text style={styles.itemTitle} numberOfLines={1}>
            我的歌单
          </Text>
        </View>

      </View>
      <AntDesign
        name={'addfolder'}
        size={30}
        style={styles.iconR}
        color={'white'}
        onPress={() => setToAdd(true)}
      />
      {toAdd&&
        <View style={styles.addContain}>
          <Text style={styles.addTitle}>
            请输入歌单名
          </Text>
          <TextInput style={styles.addInput}
                     onChangeText={(text)=>listName=text}
          >

          </TextInput>
          <TouchableOpacity style={styles.addBtn} onPress={addPlayList}>
            <Text style={styles.itemTitle}>
              确定
            </Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.addBtn} onPress={() => setToAdd(false)}>
            <Text style={styles.itemTitle}>
              取消
            </Text>
          </TouchableOpacity>
        </View>

      }
      <FlatList data={playList} renderItem={renderList}/>

    </View>
  )


}
const screen = Dimensions.get('window');
const width = screen.width;
const height = screen.height;

const styles = StyleSheet.create({
  contain:{
    width:width,
    height:height
  },
  top:{

    height:60,
    width:width,
    backgroundColor:Colors.colorPrimary,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',


  },
  login:{

    width:width,
    position:"absolute",
    bottom:66

  },
  icon:{
    flex:1,
    height:30,
    width:30
  },
  iconR:{
    flex:1,
    height:30,
    width:30,
    position:'absolute',
    right:5,
    top:15
  },
  layoutText:{
    position:'absolute',

    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
  },
  itemTitle:{
    color:'white',
    fontSize:16
  },
  addTitle:{
    color:'black',
    fontSize:24
  },
  item:{
    width:width,
    height:50,
    // justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
    borderBottomWidth:2,
    marginTop:2,
    flexDirection: 'row',
  },
  itemText:{
    flex:9,
    fontSize:20,
    marginLeft:20
  },
  del:{
    flex:1
  },
  addContain:{
    width:width*0.8,
    height:height*0.4,
    borderWidth:2,
    position:"absolute",
    top:height * 0.3,
    left:width * 0.1,
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
    zIndex:99999,
    backgroundColor:'rgba(236,232,232,0.2)'
  },
  addInput:{
    borderWidth:2,
    width:width * 0.7,
    fontSize:20

  },
  addBtn:{
    width:width*0.7,
    height:45,
    borderWidth:2,
    marginTop:10,
    marginBottom:10,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',
    // backgroundColor:'rgba(100,101,101,0.49)',
    backgroundColor:Colors.colorPrimary,
  }
});
